<template>
  <view>
    <view class="form">
      <view class="title text-xl text-bold text-center margin-bottom">领取我的电子微名片</view>

      <u-form-item label="姓名" label-width="120">
        <u-input v-model="form.name" />
      </u-form-item>
      <u-form-item label="电话" label-width="120">
        <u-input v-model="form.mobile[0].val" />
      </u-form-item>
      <u-form-item label="职位" label-width="120">
        <u-input v-model="form.position" />
      </u-form-item>
      <u-form-item label="公司" label-width="120">
        <u-input v-model="form.company" />
      </u-form-item>
      <u-form-item label="地区" label-width="120">
        <u-input v-model="form.region" type="select" @click="cityPicker=true" />
      </u-form-item>

      <u-picker mode="region" v-model="cityPicker" :params="{ province: true, city: true }" @confirm="cityChoose"></u-picker>
    </view>

    <view class="margin-tb-xl">
      <my-btn radius :width="420" @click="saveCard">开启名片</my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cityPicker: false,
        form: {
          name: '',
          mobile: [{
            id: '',
            val: '',
            delete: false,
            extra: null,
          }],
          position: '',
          company: '',
          region: ''
        },
      };
    },
    methods: {
      cityChoose(e) {
        let province = e.province.label
        let city = e.city.label
        this.form.region = [province, city].join('-')
      },
      saveCard() {
        if (this.$store.state.needAuth) {
          this.$msg('请先授权', 500, true).then(res => {
            this.$goto('/pages/mine/index', 'tab')
          })
          return false
        }

        this.$u.post('/myvcard/update', this.form).then(res => {
          this.$msg(res.data.msg, 500, true).then(res => {
            this.$goto('/pages/cards/list', 'relaunch')
          })
        })
      },
    }
  }
</script>

<style lang="scss">
  .form {
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 87, 140, 0.2);
    border-radius: 20rpx;
    margin: 0 auto;
    margin-top: -160rpx;
    padding: 50rpx;
    box-sizing: border-box;
    letter-spacing: 4rpx;
  }
</style>
